<template>
    <div :style="{minHeight: h}" class="main">
        <header-1 class="d1" @router="router">
            <template v-slot:center>
               <span class="center">
                    商品推荐活动
               </span>
            </template>
        </header-1>
        <bottom @router="creat">
            <template v-slot:center>
               <span>
                    创建活动2/5
               </span>
            </template>
        </bottom>
        <div class="dd">

        </div>
        <van-tabs v-model="active" line-width="25px" line-height="4px" title-active-color="#ff6e53">
            <van-tab title="进行中">
               <div class="ing">
                    <img class="img2" src="https://cdn3.axureshop.com/demo/1525603/images/%E5%9B%A2%E8%B4%AD%E7%AE%A1%E7%90%86/u4059.png" />
                    <div class="foot">-暂无相关数据-</div>
               </div>
            </van-tab>
            <van-tab title="全部活动">
                
        <div class="box">
            <img class="imgg" src="https://cdn3.axureshop.com/demo/1525603/images/%E5%95%86%E5%93%81%E6%8E%A8%E8%8D%90%E6%B4%BB%E5%8A%A8/u6665.png"/>
           <div class="box_top">
                <div class="box_top_1">
                    <div class="box_top_3">
                        <span class="box_top_4">暑假优惠大酬宾</span>
                        <span>推荐商品: 20个</span>
                        <span>活动日期: 2021-11-01 至 2021-11-30</span>
                        <span>备注说明: 每人限购一张</span>
                        <span>创建时间: 2021-11-01 10:09:37</span>
                    </div>
                </div>
                <div class="topr">
                    <img src="https://cdn3.axureshop.com/demo/1525603/images/%E5%9B%A2%E8%B4%AD%E7%AE%A1%E7%90%86/u3968.png" class="img1" />
                    <span class="toprr">进行中</span>
                </div>
           </div>
           <div class="box_bottom">
            <div>暂停发放</div>
            <div @click="bianji">查看详情</div>
           </div>
        </div>


        <div class="box">
            <img class="imgg" src="https://cdn3.axureshop.com/demo/1525603/images/%E5%95%86%E5%93%81%E6%8E%A8%E8%8D%90%E6%B4%BB%E5%8A%A8/u6665.png"/>
           <div class="box_top">
                <div class="box_top_1">
                    <div class="box_top_3">
                        <span class="box_top_4">暑假优惠大酬宾</span>
                        <span>推荐商品: 20个</span>
                        <span>活动日期: 2021-11-01 至 2021-11-30</span>
                        <span>备注说明: 每人限购一张</span>
                        <span>创建时间: 2021-11-01 10:09:37</span>
                    </div>
                </div>
                <div class="topr">
                    <img src="https://cdn3.axureshop.com/demo/1525603/images/%E5%9B%A2%E8%B4%AD%E7%AE%A1%E7%90%86/u3968.png" class="img1" />
                    <span class="toprr">进行中</span>
                </div>
           </div>
           <div class="box_bottom">
            <div>暂停发放</div>
            <div @click="bianji">查看详情</div>
           </div>
        </div>
            </van-tab>
        </van-tabs>
        <div class="kl">

        </div>

    </div>
</template>
<script>
import header1 from '../../components/BS/header2View.vue'
import bottom from '../../components/BS/BottomView.vue'
export default {
    components:{
        header1,
        bottom
    },
    data(){
        return{
            h:'',
            active:1
        }
    },
    created(){
        this.h = window.innerHeight + 'px'
    },
    methods:{
        router(){
            this.$router.push('/okavi6')
        },
        creat(){
            this.$router.push('/okavi27')
        },
        bianji(){
            this.$router.push('/okavi28')
        },
    }
}
</script>
<style scoped>
.main{
    background-color: #f5f5f5;
}
.d1{
    position: fixed;
    top: 0;
    right: 0;
    z-index: 999;
}
.box{
    width: 90%;
    margin: 20px auto;
    background-color: #FFFFFF;
    border-radius: 15px;
}
.box_top{
    width: 100%;
    background-color: #FFFFFF;
    display: flex;
    flex-direction: column;
    position: relative;
}
.box_bottom{
    width: 100%;
    height: 40px;
    margin-top: 1px;
    background-color: #FFFFFF;
    display: flex;
    font-size: 15px;
    color: #363636;
    justify-content: space-around;
    align-items: center;
}
.box_top_1{
    display: flex;
    width: 90%;
    height: 100%;
    margin: 10px auto;
}
.box_top_2{
    font-size: 15px;
    color: #797979;
    margin-top: 6px;
}
.box_top_3{
    display: flex;
    flex-direction: column;
    font-size: 12px;
    color: #797979;
    margin-left: 10px;
}
.box_top_3 span{
    margin: 5px;
}
.box_top_4{
    font-size: 13px;
    color: #363636;
    margin-bottom: 5px;
}
.topr{
    font-size: 12px;
    width: 60px;
    height: 20px;
    background-color: #0066cc;
    border-radius: 30px;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 15px;
    right: 10px;
}
.toprr{
    font-size: 12px;
}
.img1{
    margin-right: 5px;
}
.img2{
    display: inline-flex;
    margin: 50px auto;
}
.ing{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 150px auto;
}
.dd{
    width: 100%;
    height: 50px;
}
.kl{
    width: 100%;
    height: 70px;
}
.imgg{
    width: 100%;
    height: 92px;
}
</style>